<template>
  <!-- <scroll-view scroll-y="true" class="scroll-Y" @scroll="handleScroll" @scrolltolower="handleReachBottom"> -->
  <view class="content">
    <comHead :datas="datasObj"><template #soltcontent></template></comHead>
    <!-- 官方白菜价 -->

    <view class="bc_price_box pd-30">
      <view class="bc_price_box_one" v-if="bcMonthList.length > 0">
        <view class="bg ">
          <view class="top flex-bwt">
            <view class="left_box">
              <view class="title"> #官方白菜价# </view>
              <view class="title_bg ft-eng"> Official Cabbage Price </view>
            </view>


            <view class="title-rig c-33 ft-24">*百万优惠即抢*</view>
          </view>
        </view>
        <view class="list_view flex-eve">
          <view class="item" v-for="item in bcMonthList.slice(0, 3)" :key="item.id"
            @click="goPage(`/subpackage/immigration/immigration?id=${+ item.id}&showCoupon=true`)">
            <view class="center">
              <view class="time flex-center">
                <comTimeOut :size="22" :time="item.preferential_end_time" :isBgd="true" :second="true"></comTimeOut>

              </view>
              <image class="imgs" :src="item.cover" mode="aspectFill">
              </image>
            </view>
            <view class="name te-1 ft-24 c-33 fw-800 text_left">{{ item.name }}</view>
            <view class="ft-20 c-99 ml-10">{{ item.currency_symbol }}<span
                class="ft-num ft-32 fw-900 c-99 ft-line ft-num3">{{ item.old_price_show }}</span>{{
                  item.old_price_unit }}
            </view>
            <view class="money flex-bwt">
              <view class="">
                <text class="ft-20 c-33 ml-10">券后</text>
                <view class="text  ml-10">{{ item.currency_symbol }}<span class="ft-num3">{{ item.bc_price_show
                    }}</span>{{ item.bc_price_unit }}
                </view>
              </view>
              <view class="btn flex-center ft-24 c-33">抢</view>
            </view>
          </view>
        </view>

      </view>
      <view class="bc_price_box_two flex-eve">
        <view class="item flex-c-center" v-for="item in quanList.filter(f => f.pack_type != 2).slice(0, 3)"
          :key="item.id">
          <view class="top bd-r20">
            <view class="ft-num ft-60">{{ item.currency_symbol }}{{ item.reduce }}</view>
            <view class="c-33 ft-22">{{ item.type_name }}</view>
          </view>
          <view class="btn bd-r20" v-if="!item.is_get" @click="getQuanBtn(item.id)">点击领取</view>
          <view class="btn bd-r20" :class="'btnActive'" v-else>已领取</view>
        </view>

      </view>
      <view class="bc_price_box_three bd-r40 mt-30">
        <swiper class="swiper" circular :indicator-dots="false" :autoplay="autoplay" :interval="interval"
          :duration="duration" @change="changeSwiper">
          <swiper-item v-for="item in productListPup.product" :key="item">
            <view class="item">
              <view class="item_model bd-r40">
                <view class="flex pd-20">
                  <image class="imgs bd-r40" :src="item.cover" mode="aspectFill">
                  </image>

                  <view class="contents ml-10 te-wid">

                    <view class="flex" style="overflow: hidden;">
                      <view class="flex fs0" v-if="item.recommends_show">
                        <view class="tip ft ft-20 flex-center fs0" v-for="(tag, index) in item.recommends_show"
                          :key="index">
                          {{ tag }}
                        </view>
                      </view>
                      <view class="te-1 ft-32 c-33 fw-800">{{ item.name }}</view>

                    </view>
                    <view class="money flex mt-8">
                      <view class="ft-22">{{ item.currency_symbol }}<span class="ft-num ft-36">{{ item.bc_price_show
                          }}</span>{{ item.bc_price_unit }} <span style="color: #F1F1F1 ;">|</span>
                      </view>

                      <view class="ft-line ml-10 c-99 ft-22"> {{ item.currency_symbol }}<span
                          class="ft-num ft-line c-99 ft-32">{{ item.peer_price_show }}</span>{{
                            item.product?.peer_price_unit }}
                      </view>
                    </view>
                    <view class="quan flex">
                      <view class="text bd-r8 c-ff ft-24">{{ productListPup.type_name }}</view>
                      <view class="num ft-24 bd-r8">{{ productListPup.currency_symbol }}{{ productListPup.reduce }}
                      </view>
                    </view>
                  </view>
                </view>
                <view class="ft-22 c-99 text_center">支付时使用时效为领取后1周内</view>
              </view>
            </view>
          </swiper-item>
        </swiper>

        <view class="indicator">
          <view class="dian" v-for="(item, index) in productListPup.product" :key="index"
            :class="index == currentIndex ? 'active' : ''"></view>
        </view>

        <view class="button bd-r20" v-if="!productListPup?.is_get" @click="getQuanBtn(productListPup.id)">点击领取</view>
        <view class="button bd-r20 activeBtn" v-else>已领取</view>
      </view>
    </view>
    <!-- 拼团优惠 -->
    <view class="pt-discounts_box pd-30">
      <view class="pt-discounts_box_one topModel">
        <view class="bg">
          <view class="top flex-bwt">

            <view class="title"> #拼团优惠# </view>
            <view class="title_bg ft-eng"> Group discount </view>
            <view class="more" @click="goPage('/subpackage/joinGroup/joinGroup')">
              <text class="text">更多</text>
              <image class="icon" src="https://cdn.oss.bon-top.cn/static_bc/images/icon_left.png" mode="aspectFill">
              </image>
            </view>
          </view>
        </view>
        <view class="list_view flex-eve">
          <view class="item" v-for="item in productList.slice(0, 3)" :key="item.id"
            @click="goPage('/subpackage/joinGroup/orderPreview?spec_id=' + item.show_spec_id)">
            <view class="center">

              <image class="imgs" :src="item.cover" mode="aspectFill">
              </image>
            </view>
            <view class="name te-1 ft-24 c-33 fw-800 text_left">{{ item.name }}</view>
            <view class="ft-20 c-99 ml-10">拼团价{{ item.currency_symbol }}<span
                class="ft-num ft-32 fw-900 c-99 ft-line ft-num">{{ item.old_price_show }}</span> {{
                  item.old_price_unit }}
            </view>
            <view class="money flex-bwt">
              <view class="">
                <image class="icon ml-10" src="https://cdn.oss.bon-top.cn/static_bc/images/fire2.png" mode="aspectFill">
                </image>
                <view class="text  ml-10">{{ item.currency_symbol }}<span>{{ item.bc_price_show }}</span> {{
                  item.bc_price_unit }}</view>

              </view>
              <view class="btn flex-center ft-24 c-33">开团</view>
            </view>
          </view>
        </view>

      </view>
      <view class="topModel pt-discounts_box_two">
        <view class="bg">
          <view class="top flex-bwt">

            <view class="title"> #分享减免# </view>
            <view class="title_bg ft-eng"> Sharing relief </view>
            <view class="more" @click="goPage('/subpackage/shareReduction/shareReduction')">
              <text class="text">更多</text>
              <image class="icon" src="https://cdn.oss.bon-top.cn/static_bc/images/icon_left.png" mode="aspectFill">
              </image>
            </view>
          </view>
        </view>
        <view class="list_view flex-eve">
          <view class="item" v-for="item in benefitShareList.slice(0, 3)" :key="item.id"
            @tap.stop="goPage(`/subpackage/immigration/immigration?id=${+ item.id}&showCoupon=true`)">
            <view class="center">

              <image class="imgs" :src="item.cover" mode="aspectFill">
              </image>
            </view>
            <view class="name te-1 ft-24 c-33 fw-800 text_left">{{ item.name }}</view>
            <view class="ft-20 c-99 ml-10 mt-10">最高减免
              <span class="ft-num ft-32 fw-900 ft-num" style="color: #FF0000 ;"><span class="ft-20">{{
                item.currency_symbol
                  }}</span>{{ item.max_reduce }}</span>
            </view>
            <!-- <view class="money">
              去分享
             
              <button open-type="share" class="hidden-share-btn" @click.stop="onCustomShare(item.id, item)"></button>
            </view>  -->

            <view class="rightM c-ff bd-r20 mr-10" :class="!item.is_all ? 'rightM-active' : ''">
              <span v-if="!item.is_all" open-type="share">
                去分享
                <button open-type="share" class="hidden-share-btn" @tap.stop="onCustomShare(item.id, item)"></button>
              </span>
              <span v-else @tap.stop="goPage('/subpackage/immigration/immigration?id=' + item.id)">
                去使用</span>
            </view>
          </view>
        </view>

      </view>
      <view class="topModel pt-discounts_box_three">
        <view class="bg">
          <view class="top flex-bwt">

            <view class="title"> #赚积分# </view>
            <view class="title_bg ft-eng"> Earn points </view>
            <view class="more" @click="goPage('/subpackage/earnPoints/earnPoints')">
              <text class="text">更多</text>
              <image class="icon" src="https://cdn.oss.bon-top.cn/static_bc/images/icon_left.png" mode="aspectFill">
              </image>
            </view>
          </view>
        </view>
        <view class="list_view flex-eve">
          <view class="itemModel" v-for="(item, index) in integralTabs" :key="index">
            <image class="imgs" :src="`https://cdn.oss.bon-top.cn/static_bc/images/${item.img}.png`" mode="aspectFill"
              @click="goPage('/subpackage/earnPoints/earnPoints?type=' + item.key)">
            </image>
            <view></view>
          </view>
        </view>

      </view>

    </view>
    <!-- 本月白菜价 -->
    <view class="month_lowPrice_box pd-30 bd-r40">
      <view class="header flex-c-center">
        <view class="title"> #本月白菜价# </view>
        <view class="title_bg ft-eng"> This month's cabbage price </view>
      </view>
      <comLoadMord v-if="Object.keys(dataList).length > 0" :dataList='dataList' :pageInfo='pageInfo' ref="LoadMordView"
        @getDatas="getProductPreferentialListFun">
        <view class="list_view">
          <view class="item bd-r40 pd-20" v-for="item in bcMonthList" :key="item.id"
            @click="goPage(`/subpackage/immigration/immigration?id=${+ item.id}&showCoupon=true`)">

            <view class="item_model bd-r40">
              <!-- <view class="ft-24 c-33 fw-800">剩余抢券时间</view> -->
              <!-- 倒计时 -->
              <!-- <view class="timeOut pd-20">
                <view class="ft flex-center">
                  <view class="ft-24 fw-800 c-33 mr-4">{{ "距离结束" }}</view>
                  <comTimeOut :size="20" :time="item.preferential_end_time"></comTimeOut>

                </view>
              </view> -->
              <view class="timeOut pd-20">
                <view class="ft flex-center" v-if="item.act_status == 'will_start'">
                  <view class="ft-24 fw-800 c-33 mr-4">{{ item.time_str }}</view>
                </view>
                <view class="ft flex-center" v-else>
                  <view class="ft-24 fw-800 c-33 mr-4">{{ "距离结束" }}</view>
                  <comTimeOut :size="20" :time="item.preferential_end_time"></comTimeOut>

                </view>

              </view>

              <view class="flex">
                <image class="imgs bd-r40" :src="item.cover" mode="aspectFill">
                </image>

                <view class="contents ml-20 te-wid">
                  <!-- <view class="title_model mt-20">
                    <view class="label label1 ft-20" v-for="label in item.tags" :key="label.id">{{ label.name }}
                    </view>
                    <view class="text ft-32 ft1 te-wid">
                      <p class="te-1">{{ item.name }}</p>
                    </view>
                  </view> -->
                  <view class="title_model mt-20 flex">
                    <view class="label flex-center ft-20" v-for="label in item.recommends_show" :key="label">{{ label
                    }}
                    </view>
                    <view class="text ft-32 ft1 te-wid">
                      <p class="te-1">{{ item.name }}</p>
                    </view>
                  </view>
                  <view class="money flex mt-8">

                    <view class="ft-20 bg flex">

                      <view style="color: #FF0000;">
                        {{ item.currency_symbol }}
                        <span class="ft-num3 ft-36">{{ item.bc_price_show }}</span>
                        {{ item.bc_price_unit }}
                      </view>
                      <view style="margin-right: 10rpx;">
                        <span style="color: #F1F1F1;">|</span>
                        <span class="c-33 ml-4"
                          v-if="(item.currency_symbol + item.bc_price_show).length < 12">白菜券后价</span>
                        <span class="c-33 ml-4" v-else>券后价</span>
                      </view>


                    </view>
                    <!-- <span style="color:#F1F1F1;">&;</span> -->
                    <text
                      style="display: inline-block;width: 2rpx;height: 30rpx;background: #F1F1F1;margin: 0  0 0 10rpx;"></text>
                    <view class="ft-line ml-10 c-99 ft-20">
                      {{ item.currency_symbol }}
                      <span class="ft-num ft-line c-99 ft-32"> {{ item.old_price_show }}</span>
                      {{ item.old_price_unit }}
                    </view>
                  </view>
                  <view class="quan flex-bwt">
                    <view class="quan_content">
                      <view class="c-66 ft-22">先抢先得，仅剩{{ item.coupon_remain_num }}名</view>
                      <view class="quan_progress ft-24 bd-r8">
                        <!-- 进度条 -->
                        <view class="progress">
                          <view class="progress_color" :style="{ width: item.progressVal + '%' }"></view>
                        </view>
                        <view class="ft-24 fw-800">{{ item.coupon_use_num }}/{{ item.coupon_total_num }}</view>
                      </view>
                    </view>
                    <view class="btn full" v-if="item.coupon_remain_num <= 0">名额已满</view>
                    <view class="btn" v-else-if="item.act_status == 'un_get'">去抢</view>
                    <view class="btn full" v-else-if="item.act_status == 'will_start'">即将开始</view>
                    <view class="btn over" v-else-if="item.act_status == 'is_get'">已抢</view>
                    <view class="btn over" v-else>已结束</view>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </comLoadMord>


    </view>
  </view>

  <comTabBar :currentIndex="2"></comTabBar>
  <!-- 优惠券弹窗 -->
  <comUpOverlay :data="quanListPup" :show="showOverlay" @close="closePop" @submit="getQuanWeek">
  </comUpOverlay>
</template>

<script setup lang="js">
import { utils } from "@/utils/utils.js";
import { api } from "@/utils/api.js";
import { DataUtils } from "@/utils/Data.js";
import comHead from '@/components/comHead.vue';
import comLoadMord from '@/components/comLoadMord.vue';
// import { debounce } from 'lodash-es';
import comTabBar from "@/components/comTabBar.vue";
import comUpOverlay from "@/components/comUpOverlay.vue";
import comTimeOut from '@/components/comTimeOut.vue'

import {
  onLoad,
  onPageScroll,
  onShow, onReachBottom,
  onUnload,
  onShareAppMessage,
  onShareTimeline
} from '@dcloudio/uni-app';
import {
  nextTick,
  onMounted,
  reactive,
  ref
} from 'vue';
let datasObj = reactive({
  title: '白菜折上折',
  img: 'https://cdn.oss.bon-top.cn/static_bc/images/bc.png',
  color: '#DBF046',
  direction: '',
  scrollTop: 0,
  noBack: true,
  backisImg: true,//导航文字模块的背景图
  headerisImg: true,//整个huader模块的背景图
  fullImag: true,//header是否显示完整的图片
  isBoxHeightAuto: false,//box是否设置高度为 auto
  imgHeight: 764,
  height: 764,
})
let currentIndex = ref(0)
let quanList = ref([1, 2, 3, 4, 5])
let integralTabs = ref([])
let autoplay = ref(true)
let interval = ref(2500)
let duration = ref(500)
const dataList = ref({})
const showOverlay = ref(false)
let pageInfo = reactive({
  currentPage: 1,
  pageSize: 10
})
onUnload(() => {
  console.log('我离开了=======》')
  if (shareConfig.value.timestemp > 0) {
    secondsEnd.value = Math.floor(Date.now() / 1000)
    setShareVisit(_options)
  }
})
const _options = ref({})
const shareConfig = ref({
  title: '',
  path: '',
  imageUrl: '',
  queryParams: {} // 当前页面参数
})
// 获取页面栈实例
const currentPages = getCurrentPages()
const currentRoute = currentPages[currentPages.length - 1]
const secondsStart = ref(0)
const secondsEnd = ref(0)
// 初始化分享参数
const initShareParams = (id) => {
  // 获取当前页面参数
  console.log('currentRoute', currentRoute.options)
  const query = currentRoute.options || {}
  if (!query.share_user_id) {
    const userInfo = uni.getStorageSync("userInfo")
    query.share_user_id = userInfo ? userInfo.id : ''
  }
  if (!query.id) query.id = id
  query.timestemp = parseInt((new Date().getTime()) / 1000)


  const queryString = Object.keys(query)
    .map(key => `${key}=${query[key]}`)
    .join('&')

  // 更新分享配置
  shareConfig.value = {
    ...shareConfig.value,
    path: `subpackage/immigration/immigration?${queryString}`,
    queryParams: query,

  }
  console.log('shareConfig.value', shareConfig.value)
}
// 自定义分享方法
const onCustomShare = (id, list) => {
  shareConfig.value.title = list.name
  shareConfig.value.imageUrl = list.cover
  initShareParams(id)
}
// 好友分享配置
onShareAppMessage(() => ({
  title: shareConfig.value.title,
  path: shareConfig.value.path,
  imageUrl: shareConfig.value.imageUrl,
  success(res) {
    uni.$emit('shareSuccess', {
      type: 'friend',
      data: shareConfig.value.queryParams
    })
  }
}))

// 朋友圈分享配置（需基础库2.11.3+）
onShareTimeline(() => ({
  title: shareConfig.value.title,
  query: shareConfig.value.path.split('?') || '',
  imageUrl: shareConfig.value.imageUrl
}))



//获取分享减免列表
const shareList = ref([])
const shareProgsList = ref([])
let benefitShareList = reactive([])
const getBenefitShareListFun = async () => {
  await utils
    .request(
      api.getBenefitShareList,
      {
        app_id: utils.app_id,
        identity: utils.identity,
        ...pageInfo
      },
      "get"
    )
    .then((res) => {
      benefitShareList = res.data.items

    });
};

//拼团优惠
let productList = reactive([])
const getBenefitGroupBuyListData = async () => {
  await utils
    .request(
      api.getBenefitGroupBuyList,
      {
        page: 1,
        pageSize: 25,
      },
      "get"
    )
    .then((res) => {
      productList = res.data.items;

    });
}
// 触底请求
const LoadMordView = ref(null)
const handleReachBottom = () => {
  LoadMordView.value.changeBottom()

}

onReachBottom(() => {
  LoadMordView.value.changeBottom()

})
//本月白菜价
let bcMonthList = reactive([])
const getProductPreferentialListFun = async () => {
  let obj = {
    week_type: 1,//1本月场/下月场2
    ...pageInfo
  }
  await utils
    .request(
      api.getProductPreferentialList,
      obj,
      "get"
    )
    .then((res) => {
      bcMonthList = res.data?.items
      dataList.value = res.data
      dataList.value.noDataType = 1
      dataList.value.listIsShow = false
      if (bcMonthList.length) dataList.value.listIsShow = true
      bcMonthList.forEach(item => {
        let _num = (item.coupon_use_num / item.coupon_total_num) * 100
        item.progressVal = item.coupon_use_num == 0 ? 0 : _num > 100 ? 100 : _num
        item.timeStr = DataUtils.formatCountdown(item.preferential_end_time)

      })

    });
}
//本月精选优惠
const quanListPup = ref([])

const getQuanList = () => {
  utils
    .request(
      api.getWeekCouponList,
      {

      },
      "get"
    )
    .then((res) => {
      if (res.data?.un_get === 0) {
        showOverlay.value = false;
      } else {
        showOverlay.value = true;
        quanListPup.value = res.data?.list;
        console.log('quanListPup.value', quanListPup.value)
        // if(quanListPup.value)

      }

    });
}
//新人券
const productListPup = ref([])

const getNewcomerCouponListFun = () => {
  utils
    .request(
      api.getNewcomerCouponList,
      {

      },
      "get"
    )
    .then((res) => {
      quanList.value = res.data?.list;
      productListPup.value = quanList.value.reduce((a, b) => {
        if (b.pack_type == 2) a = b

        return a
      }, {})

    });
}
// let isNewcomer = ref(0)
// let isAll = ref(0)
let productId = ref(0)
let ids = reactive([])
//白菜券领取
const getQuanWeek = () => {
  console.log('执行了')
  if (!isSettings.value) {
    wx.requestSubscribeMessage({
      tmplIds: ['fGFKom9jCfBcu021MgPs0lAEqibuVym4M2iIjmHdfVI'],
      success(res) {
        console.log('res', res)
        utils.subscribeMessage(res)

      },
      complete(res) {
        if (res['fGFKom9jCfBcu021MgPs0lAEqibuVym4M2iIjmHdfVI'] == 'accept') isSettings.value = true


        getQuan(1, 0, 1)

      }
    })
  } else {
    getQuan(1, 0, 1)

  }
}
const closePop = () => {
  console.log('哈哈哈哈')
  showOverlay.value = !showOverlay.value
}
//领取优惠券
const getQuan = (All, Newcomer, week) => {
  utils
    .request(
      api.receiveCoupon,
      {
        is_all: All,
        is_newcomer: Newcomer,
        ids: ids,
        is_week: week
      },
      "post"
    )
    .then((res) => {
      if (res.code === 200) {
        utils.toast('领取成功')
        if (Newcomer == 1) getNewcomerCouponListFun()
        if (week == 1) getQuanList()
      }

    });
}
// 新人优惠券领取
const getQuanBtn = (id) => {
  ids = []
  ids.push(id)

  getQuan(0, 1, 0)




}

onPageScroll((e) => {
  // console.log('hhhhh')
  const scrollTop = e.scrollTop; // 获取滚动距离
  // console.log('滚动距离', e.detail)
  // 优化监听事件 防止毫秒级触发
  datasObj.direction = (scrollTop > datasObj.scrollTop) ? 'down' : 'up'
  if (scrollTop > 10 && datasObj.direction == 'down' && datasObj.backisImg) {
    datasObj.color = '#FFFFFF'
    datasObj.backisImg = false
    datasObj.isBoxHeightAuto = true

    datasObj.scrollTop = scrollTop
    // console.log('我是向下滑动')

  } else if (scrollTop < 5 && datasObj.direction == 'up' && !datasObj.backisImg) {
    datasObj.color = '#DBF046'
    datasObj.backisImg = true
    datasObj.isBoxHeightAuto = false
    datasObj.scrollTop = scrollTop
    // console.log('我是向上滑动^^^')

  }
})
// // 定义 onChange 方法
const onChange = (e) => {
  timeData.value = e;
};
// 使用 reactive 创建响应式对象
const timeData = ref({});
const daysUntil = (fixedDate) => {
  // 将字符串日期转换为日期对象
  const targetDate = new Date(fixedDate);
  // 获取今天的日期
  const today = new Date();
  // 将日期转换为毫秒数
  const oneDay = 24 * 60 * 60 * 1000; // 一天的毫秒数
  // 计算两个日期之间的差异（以毫秒为单位）
  const diff = targetDate - today;
  // 将差异转换为天数
  // const daysLeft = Math.ceil(diff / oneDay);
  return diff;
}
// 轮播
const changeSwiper = (e) => {
  currentIndex.value = e.detail.current

}

const getDatas = () => { }
let times = reactive(0)
// 跳转
const goPage = (url) => {
  console.log('url', url)
  uni.navigateTo({ url: url })
}

onMounted(async () => {
  await getProductPreferentialListFun()
  await getNewcomerCouponListFun()
  await getBenefitGroupBuyListData()
  await getBenefitShareListFun()
  await getQuanList()
  // uni.onPageScroll(handleScroll)
  times = daysUntil('2025-3-21 13:20:00')
  nextTick(() => {
    integralTabs.value = [
      {
        key: 1,
        name: '推荐官',
        img: 'zsz_tjg'
      },
      {
        key: 2,
        name: '评价达人',
        img: 'zsz_pjdr'
      },
      {
        key: 3,
        name: '问答专家',
        img: 'zsz_wdzj'
      },
    ]
  })
})
const isSettings = ref(false)

onLoad(() => {
  wx.getSetting({
    withSubscriptions: true,
    success(res) {
      if (res.subscriptionsSetting.itemSettings) {

        if (res.subscriptionsSetting.itemSettings['fGFKom9jCfBcu021MgPs0lAEqibuVym4M2iIjmHdfVI'] == 'accept') isSettings.value = true
      }
    }
  })
})
</script>

<style lang="scss" scoped>
.content {
  // display: flex;
  // flex-direction: column;
  // align-items: center;
  // justify-content: center;
  background-color: #DBF046;
  padding-bottom: 150rpx;
}

.scroll-Y {
  // height: 200px;
  height: 100vh;
}

.logo {
  height: 200rpx;
  width: 200rpx;
  margin-top: 200rpx;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 50rpx;
}

.text-area {
  display: flex;
  justify-content: center;
}

.title {
  font-size: 36rpx;
  color: #8f8f94;
}

.more {
  width: 122rpx;
  // margin-right: 20rpx;
  height: 54rpx;

  display: flex;
  justify-content: center;
  align-items: center;
  background: #ffffff;
  border-radius: 20rpx 20rpx 20rpx 20rpx;
  border: 2rpx solid #333333;

  .text {
    font-weight: 400;
    font-size: 24rpx;
    color: #333333;
    margin-right: 8rpx;
  }

  .icon {
    width: 24rpx;
    height: 24rpx;
  }
}

.time {
  @include flex;
  align-items: center;
  margin-left: 10rpx;

  &__custom {
    margin-top: 4px;
    // width: 22px;
    min-width: 22rpx;
    // height: 22px;
    background-color: #9c0000;
    border-radius: 4px;
    /* #ifndef APP-NVUE */
    display: flex;
    /* #endif */
    justify-content: center;
    align-items: center;
    padding: 6rpx;
    font-weight: 800;


    &__item {
      color: #fff;
      font-size: 20rpx;
      text-align: center;
    }
  }

  &__doc {
    color: #9c0000;
    padding: 0px 4px;
  }

  &__item {
    color: #606266;
    font-size: 15px;
    margin-right: 4px;
  }
}



.bc_price_box {
  width: 100%;
  position: relative;
  // top: 200px;

  &_one {
    background: linear-gradient(to bottom, #FFFFFF, #FFBA62);
    border-radius: 40rpx;
    padding: 6rpx;
    box-sizing: border-box;
    height: 590rpx;

    .bg {
      height: 160rpx;
      background-color: #333;
      border-radius: 40rpx 40rpx 0 0;
      overflow: hidden;
      // border: 1px solid red;
    }

    .top {
      // position: relative;
      overflow: hidden;
      padding: 0 20rpx;
      height: 84rpx;

      .left_box {
        position: relative;
        overflow: hidden;
        height: 84rpx;
        flex: 1;

      }

      .title_bg {
        z-index: 10;
        text-align: left;
        font-weight: 400;
        font-size: 44rpx;
        height: 44rpx;
        line-height: 44rpx;
        top: 36rpx;
        position: absolute;
        color: #FFFFFF;
        opacity: 0.3;
      }

      .title {
        position: absolute;
        top: 20rpx;
        left: 0rpx;
        font-weight: 800;
        font-size: 32rpx;
        height: 44rpx;
        line-height: 44rpx;
        color: #dbf046;
        text-align: center;
        // line-height: 80rpx;

      }

      .title-rig {
        background: linear-gradient(to left, #DBF046, #BFFFBB);
        // padding: 20rpx;
        height: 54rpx;
        line-height: 54rpx;
        padding: 0 20rpx;
        border-radius: 20rpx;
      }
    }

    .list_view {
      background: linear-gradient(to bottom, #FFFFFF, #FFBA62);
      overflow: hidden;
      border-radius: 40rpx;
      padding: 20rpx 0;
      // position: absolute;
      position: relative;
      top: -75rpx;

      .center {
        text-align: center;
      }

      .name {
        padding: 0 10rpx;
        box-sizing: border-box;
      }

      .item {
        width: 204rpx;
        box-sizing: border-box;
        height: 454rpx;
        background-color: #fff;
        border-radius: 20rpx;
        padding: 10rpx 0;
        // background-color: red;
      }

      .time {
        font-weight: 400;
        font-size: 20rpx;
        color: #9C0000;
        background-color: #FFF5F3;
        // background-color: red;
        border-radius: 20rpx;
        margin: 0 auto;
        margin-top: 10rpx;
        width: 184rpx;
        height: 36rpx;
        line-height: 36rpx;
      }

      .imgs {
        width: 184rpx;
        height: 228rpx;
        border-radius: 20rpx;
      }

      .money {
        // background-color: #FFF3EC;
        background: linear-gradient(to left, #FFFFFF, #FFF3EC);
        width: 184rpx;
        height: 86rpx;
        margin: 0 auto;
        border-radius: 20rpx;

        .text {

          font-weight: 800;
          font-size: 20rpx;
          color: #FF0000;


          span {

            font-family: DIN COROS-Black;
            font-weight: 900;
            font-size: 28rpx;
            color: #FF0000;
            font-style: normal;
            text-transform: none;

          }
        }

        .btn {
          width: 68rpx;
          height: 68rpx;
          background: linear-gradient(to left, #FFBA61, #DBF046);
          border-radius: 16rpx;
        }

      }
    }
  }

  &_two {
    background-color: #fff;
    border-radius: 40rpx;
    margin-top: 30rpx;
    width: 690rpx;
    height: 286rpx;

    .item {

      .top {
        width: 204rpx;
        height: 172rpx;
        background: linear-gradient(to left, #FFEE7E, #DBF046);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        color: #333;

      }

      .btn {
        background-color: #333;
        width: 204rpx;
        height: 74rpx;
        text-align: center;
        line-height: 74rpx;
        color: #DBF046;
      }

      .btnActive {
        background: #F1F1F1;
        color: #999999;
      }
    }
  }

  &_three {
    background-color: #fff;
    padding: 20rpx;

    .swiper {
      // height: 430rpx;
    }

    .item {
      .item_model {
        background-color: #F8F8F8;
        padding-bottom: 20rpx;

        .imgs {
          width: 140rpx;
          height: 174rpx;
          flex-shrink: 0;
        }



      }


      .contents {
        .tip {
          height: 36rpx;
          display: inline-block;
          line-height: 36rpx;
          box-sizing: border-box;
          background: linear-gradient(88deg, #dbf046 0%, #ffee7e 100%);
          border-radius: 8rpx 8rpx 8rpx 8rpx;
          margin-right: 4rpx;
          padding: 0 4rpx;

        }

        .quan {
          .text {
            background-color: #333;
            text-align: center;
            padding: 12rpx;
          }

          .num {
            padding: 12rpx;
            background: linear-gradient(to left, #FFBA61, #DBF046);
          }
        }
      }

    }

    .indicator {
      height: 60rpx;
      display: flex;
      justify-content: center;
      align-items: center;

      .dian {
        width: 10rpx;
        height: 10rpx;
        background-color: #D1D1D1;
        border-radius: 50%;
        margin: 5rpx;
      }

      .active {
        width: 30rpx;
        height: 10rpx;
        background-color: #333333;
        border-radius: 4rpx;
        transition: 0.1s;

      }
    }

    .button {
      width: 60%;
      height: 74rpx;
      background-color: #333;
      color: #DBF046;
      line-height: 74rpx;
      text-align: center;
      margin: 0 auto;
      // margin-top: 20rpx;

    }

    .activeBtn {
      background-color: #F1F1F1;
      color: #999;
    }
  }


}

// 拼团
.pt-discounts_box {
  width: 100%;
  padding-top: 0;

  .topModel {
    // background: linear-gradient(to bottom, #FFFFFF, #FFBA62);
    background-color: #fff;
    border-radius: 40rpx;
    padding: 6rpx;
    height: 550rpx;

    .bg {
      height: 160rpx;
      background: linear-gradient(to left, #DBF046, #FFBA62);
      border-radius: 40rpx 40rpx 0 0;
      overflow: hidden;

    }

    .top {
      position: relative;
      overflow: hidden;
      padding: 0 20rpx;
      height: 80rpx;


      .title_bg {
        z-index: 10;
        text-align: left;
        line-height: 80rpx;
        // font-family: 'DIN COROS';
        font-weight: 400;
        font-size: 44rpx;
        top: 14rpx;
        position: relative;
        color: #FFFFFF;
        opacity: 0.5;
        z-index: 0;
      }

      .title {
        position: absolute;
        top: 0rpx;
        left: 20rpx;
        font-weight: 800;
        font-size: 32rpx;
        color: #333;
        z-index: 1;
        text-align: center;
        line-height: 80rpx;

      }

      .title-rig {
        background: linear-gradient(to left, #DBF046, #BFFFBB);
        height: 54rpx;
        line-height: 54rpx;
        padding: 0 20rpx;
        border-radius: 20rpx;
      }
    }

    .list_view {
      // background: linear-gradient(to bottom, #FFFFFF, #FFBA62);
      background-color: #fff;

      overflow: hidden;
      border-radius: 40rpx;
      padding: 20rpx 0;
      // position: absolute;
      position: relative;
      top: -75rpx;

      .center {
        text-align: center;
      }

      .name {
        padding: 0 10rpx;
        box-sizing: border-box;
      }

      .item {
        width: 204rpx;
        // height: 454rpx;
        background-color: #fff;
        border-radius: 20rpx;
        padding: 10rpx 0;
      }

      .time {
        font-weight: 400;
        font-size: 20rpx;
        color: #9C0000;
        background-color: #FFF5F3;
        // background-color: red;
        border-radius: 20rpx;
        margin: 0 auto;
        margin-top: 10rpx;
        width: 184rpx;
        height: 36rpx;
        line-height: 36rpx;
      }

      .imgs {
        width: 184rpx;
        height: 228rpx;
        border-radius: 20rpx;
      }

      .rightM {
        margin: 10rpx 10rpx 0;

        height: 78rpx;
        line-height: 78rpx;
        text-align: center;
        background-color: #333;
        box-sizing: border-box;

        position: relative;

        .hidden-share-btn {
          opacity: 0;
          position: absolute;

          left: 0;
          right: 0;
          top: 0;
          bottom: 0;
        }


      }

      .rightM-active {
        background-color: #DBF046;
        color: #333;
      }

      .money {
        // background-color: #FFF3EC;
        background: linear-gradient(to left, #FFFFFF, #FFF3EC);
        width: 184rpx;
        height: 86rpx;
        margin: 0 auto;
        border-radius: 20rpx;
        position: relative;

        .hidden-share-btn {
          opacity: 0;
          position: absolute;
          width: 100%;
          height: 100%;
          left: 0;
          top: 0;
        }

        .text {
          font-weight: 800;
          font-size: 20rpx;
          color: #FF0000;


          span {

            font-family: DIN COROS-Black;
            font-weight: 900;
            font-size: 28rpx;
            color: #FF0000;
            font-style: normal;
            text-transform: none;

          }
        }

        .btn {
          width: 68rpx;
          height: 68rpx;
          background: linear-gradient(to left, #FFBA61, #DBF046);
          border-radius: 16rpx;
        }

      }
    }
  }

  &_one {
    .list_view {
      .item {
        border: 2rpx solid #F1F1F1;

        .imgs {
          width: 184rpx;
          height: 228rpx;
        }

        .money {
          .icon {
            width: 32rpx;
            height: 32rpx;
          }

          .btn {
            background: linear-gradient(to left, #BFFFBB, #DBF046);
          }
        }
      }
    }
  }

  &_two {
    margin-top: 30rpx;

    .list_view {
      .name {
        padding: 0 10rpx;
        box-sizing: border-box;
      }

      .item {
        border: 2rpx solid #F1F1F1;

        .imgs {
          width: 184rpx;
          height: 228rpx;
        }

        .money {
          background: linear-gradient(to left, #DBF046, #DBF046);
          text-align: center;
          line-height: 86rpx;
          margin-top: 10rpx;
        }
      }
    }
  }

  &_three {
    margin-top: 30rpx;
    height: 340rpx !important;


    .list_view {
      background: linear-gradient(to left, #fff, #fff) !important;

      .itemModel {
        // background-color: red;
        margin-top: 13rpx;

        .imgs {
          width: 208rpx;
          height: 198rpx;
          flex-shrink: 0;
        }



      }
    }
  }
}

// 本月白菜价
.month_lowPrice_box {
  width: 100%;
  background-color: #FBFFDF;

  .header {
    width: 100%;
    position: relative;
    text-align: center;

    .title_bg {
      z-index: 10;
      text-align: left;
      // line-height: 80rpx;
      // font-family: 'DIN COROS';
      font-weight: 400;
      font-size: 44rpx;
      line-height: 44rpx;
      top: 14rpx;
      position: relative;
      color: #DBF046;
      opacity: 0.7;
      z-index: 0;
      text-align: center;

    }

    .title {
      position: absolute;
      top: 0rpx;
      font-weight: 800;
      font-size: 32rpx;
      height: 44rpx;

      line-height: 44rpx;

      color: #333;
      z-index: 1;
      text-align: center;
      // line-height: 80rpx;
      text-align: center;


    }

  }

  .list_view {
    margin-top: 30rpx;

    .item {
      background-color: #fff;
      border: 2rpx solid #F1F1F1;
      margin-bottom: 30rpx;
      width: 690rpx;

      .timeOut {
        background: linear-gradient(to bottom, #FFF3EC, #FFFFFF);

      }

      .item_model {
        // background-color: #F8F8F8;
        // background: linear-gradient(to bottom, #FFF3EC, #FFFFFF);
        background: #fff;
        // padding-bottom: 20rpx;
        overflow: hidden;

        .imgs {
          width: 222rpx;
          height: 274rpx;
          flex-shrink: 0;
        }



      }


      .contents {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        // background-color: red;
        height: 274rpx;

        .title_model {
          display: flex;

          .label {
            border-radius: 8rpx;
            padding: 0 4rpx;
            height: 36rpx;
            margin-right: 4rpx;
            color: #333333;
            background: linear-gradient(to right, #DBF046, #FFEE7E);
            flex-shrink: 0;

          }

          .text {
            margin-left: 10rpx;
            margin-right: 10rpx;
          }



        }

        .money {
          margin-top: -10rpx;
          // background: red;

          .bg {
            background: linear-gradient(to left, #FFF3EC, #fff3ec00);
            // padding: 10rpx;
            border-radius: 20rpx;
            height: 56rpx;
            line-height: 56rpx;
            min-width: 236rpx;

          }
        }

        .quan {
          background: linear-gradient(to left, #f8f8f800, #F8F8F8);
          padding: 20rpx;
          box-sizing: border-box;
          border-radius: 20rpx;

          .btn {
            width: 124rpx;
            height: 78rpx;
            background: linear-gradient(to left, #FFBA61, #DBF046);
            font-size: 28rpx;
            border-radius: 20rpx;
            line-height: 78rpx;
            text-align: center;

          }

          .over {
            background-color: #F1F1F1;
            background: linear-gradient(to left, #F1F1F1, #F1F1F1);
            color: #999999;
          }

          .full {
            background-color: #F1F1F1;
            background: linear-gradient(to left, #333333, #333333);
            color: #fff;
          }

          .quan_content {
            flex: 1;
            box-sizing: border-box;
            margin-right: 10rpx;


            .quan_progress {
              flex: 1;
              display: flex;
              align-items: center;
              height: 20rpx;
              margin-top: 20rpx;

              .progress {
                height: 100%;
                flex: 1;
                background-color: #F1F1F1;
                border-radius: 20rpx;
                overflow: hidden;
                padding: 0;
                margin: 0;
                margin-right: 20rpx;

                .progress_color {
                  background: linear-gradient(to left, #FFBA61, #DBF046);
                  border-radius: 20rpx;
                  height: 100%;
                }

              }
            }
          }
        }
      }

    }
  }
}
</style>